<template>
  <div>
    <el-header class="header">
      <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    </el-header>
	
	<el-main>
		<el-card class="deposit-card">
		  <el-form :model="form" class="deposit-form">
		    <el-form-item label="存款卡号">
		      <el-input v-model="depform.account.accountname" placeholder="请输入存款卡号" class="input-field"></el-input>
		    </el-form-item>
			
		    <el-form-item label="存入金额">
		      <el-input v-model="depform.money" type="number" placeholder="请输入存入金额" class="input-field"></el-input>
		    </el-form-item>
			
		    <el-form-item label="支付方式">
		      <el-select v-model="paymentMethod" placeholder="请选择支付方式" class="input-field">
		        <el-option label="微信" value="wechat" />
		        <el-option label="支付宝" value="alipay" />
		      </el-select>
		    </el-form-item>
			
		    <el-form-item>
		      <el-button type="primary" @click=" handleWithdraw()">确认存入</el-button>
		    </el-form-item>
		  </el-form>
		  
		  <el-dialog title="输入密码" v-model="passwordDialogVisible">
		    <el-input v-model="depform.account.password" type="password" placeholder="请输入密码"></el-input>
		    <div slot="footer" class="dialog-footer">
		      <el-button @click="passwordDialogVisible = false">取消</el-button>
		      <el-button type="primary" @click="confirmWithdraw()">确认</el-button>
		    </div>
		  </el-dialog>
		</el-card>
	</el-main>
	
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { accountin } from '../utils/requestApi.js'

const paymentMethod = ref()
// 表单数据
const depform = ref({
  account:{
  	accountname: '',
  	password: ''
  },
  money:''
})


// 控制密码输入框的显示
const passwordDialogVisible = ref(false)


const handleWithdraw = async () => {
		passwordDialogVisible.value=true;
  }
  
  
//密码验证及处理存款请求
const confirmWithdraw = async () => {
	
	
	accountin(depform.value).then(response =>{
		if (response.data.code === '200'){
				  ElMessage({
					  message:'取款成功',
					  type:'success'
				  });
		
		}else{
				ElMessage({
				  message: response.data.msg,
				  type: 'danger'
				});  
		}
	})
	.catch(err =>{
		  ElMessage({
		    message: err,
		    type: 'danger'
		  });
	});
}


</script>

<style scoped>
.header {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}
/* 卡片样式 */
.deposit-card {
  max-width: 800px;
  margin: 100px auto;
  padding: 40px;
}

.deposit-form .input-field {
  width: 100%;
}
</style>